<template>
	<view>
		<uni-popup ref="popup" @maskClick="close" type="bottom" border-radius="32rpx 32rpx 0 0">
			<view class="reportPopup">
				<view class="popupMian">
					<view class="popupTitle1">
						<image class="topImg" src="/static/img/index/189.png" mode="widthFix"></image>
						<view class="tgjl" @tap="openToutiao">
							推广记录
							<image src="/static/img/index/191.png" mode="widthFix"></image>
						</view>
						<view class="avatar">
							<view class="">
								<view>
									<image :src="httpUrl+'/app/file/viewFile?fileId='+info.br.avatarId" mode="aspectFill"></image>
								</view>
								{{info.br.userName.length>10?info.br.userName.slice(0,10):info.br.userName}}
							</view>
							<view class="" v-if="!isBr">
								<view>
									<image :src="httpUrl+'/app/file/viewFile?fileId='+info.tr.avatar" mode="aspectFill"></image>
								</view>
								{{info.tr.userName.length>10?info.tr.userName.slice(0,10):info.tr.userName}}
							</view>
						</view>
						
						<text v-if="isBr"> 恭喜 {{info.br.userName.length>14?info.br.userName.slice(0,14):info.br.userName}} 荣登头条</text>
						<text v-else>恭喜 {{info.br.userName.length>6?info.br.userName.slice(0,6):info.br.userName}}携手{{info.tr.userName.length>6?info.tr.userName.slice(0,6):info.tr.userName}} 荣登头条</text>
						<text>当前头条价值{{(getMoneys?Number(getMoneys)+Number(toutiaoVal):toutiaoVal)*10}}钻</text>
						<!-- <view></view>
						<text style="color: #262626;font-size: 32rpx;font-weight: bold;">上头条</text>
						<image @tap="close" style="width: 21rpx;height: 21rpx;" src="../../static/img/close.png">
						</image> -->
					</view>
			<!-- 		<view class="reportTitle">
						<text>当前头条金额</text>
					</view>
					<view class="toutiaoWrap">
						<text class="toutiao">
							><text style="font-weight: bold;font-size: 42rpx;color: #FF263F;">￥{{toutiaoVal}}</text>
						</text>
					</view>
					<view @tap="openToutiao" class="reportRecord">
						<text style="color: #262626;font-size: 28rpx;font-weight: bold;">头条记录</text>
						<image style="width: 32rpx;height: 32rpx;margin-left: 8rpx;"
							src="../../static/img/chevronRight.png"></image>
					</view> -->
					<view class="reportTitle">
						<text>加价金额</text>
					</view>
					<view class="toutiaoMoneyWrap">
						<view @tap="touchMoney(index)" v-for="(item,index) in moneyList" :key="index"
							class="toutiaoMoney" :class="{toutiaoMoneys:moneyListIndex==index}">{{item.name}}</view>
						<view v-if="moneyListIndex!=2" @tap="touchMoney(2)" class="toutiaoMoney">自定义</view>
						<input v-else class="toutiaoMoney" type="number" focus v-model="getMoneys" />
					</view>
					<view class="xieyi">点击视为同意<text style="color: #4080FF;">《服务协议》</text></view>
					<view class="typeWrap">
						<view @tap="chooseType(item)" v-for="(item,index) in paymentChannels" :key="index" class="type">
							<view class="types">
								<image class="typeImg" :src="'/static/img/index/'+item.icon+'.png'" mode="widthFix">
								</image>
								<text class="typeText">{{item.name}}</text>
							</view>
							<view class="types types1">
								<image class="chooseType"
									:src="data.payChannel == item.value?'/static/img/index/49.png':'/static/img/index/52.png'"
									mode="widthFix">
								</image>
							</view>
						</view>
					</view>
					<view class="moneyWraps">
						<view class="moneyWrap">
							<view style="display: flex;flex-direction: column;">
								<text style="color: #262626;font-size: 24rpx;">实付现金（元）</text>
								<text
									style="color: #FF263F;font-size: 36rpx;font-weight: 36rpx;">{{getMoneys?Number(getMoneys)+Number(toutiaoVal):toutiaoVal}}</text>
							</view>
							<view @tap="zhifu" class="liji">立即支付</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="toutiaoPop" type="bottom" border-radius="32rpx 32rpx 0 0">
			<view class="reportPopup">
				<view class="popupMian">
					<view class="popupTitle">
						<view></view>
						<text
							style="color: #262626;font-size: 32rpx;font-weight: bold;">头条记录({{headlineHistoryTotal}})</text>
						<image @tap="toutiaoClose" style="width: 21rpx;height: 21rpx;" src="../../static/img/close.png">
						</image>
					</view>
				</view>
				<scroll-view scroll-y="true" @scrolltolower="scrollToutiao" class="reportPopupWrap">
					<view v-for="(item, index) in headlineHistoryList" :key="index" class="hongbao-card">
						<view class="card-content">
							<view class="card-title">墙墙：{{item.title}}</view>
							<view class="card-item">
								<text class="label">头条金额：</text>
								<text class="value money">{{ item.headlineAmount }}</text>
							</view>
							<view class="card-item">
								<text class="label">创建时间：</text>
								<text class="value">{{ item.createTime }}</text>
							</view>
							<view class="card-item">
								<text class="label">结束时间：</text>
								<text class="value">{{ item.endTime }}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<SanshuiPaymentPassword v-if="data.show1" :onConfirm="data.onConfirm" :onCancel="()=>{data.show1 = false}" />
	</view>
</template>

<script setup lang="ts">
	import SanshuiPaymentPassword from '@/components/sanshui-payment-password/sanshui-payment-password.vue'
	import { ref, reactive } from 'vue';
	import {queryUserInfo} from '@/utils/api/userInfo.ts'
	import { onLoad } from '@dcloudio/uni-app';
	import { currentHeadline, upHeadline, headlineHistory } from '@/utils/api/index.ts';
	import { paymentChannels, payment } from '@/utils/index'
	// 关闭返回
	const close = () => {
		uni.navigateBack({
			success: function () {
				uni.$emit('refreshData', { trendsId: trendsId.value });
			}
		})
	}
	const httpUrl = ref(getApp().globalData.baseUrl)
	const trendsId = ref('')
	const popup = ref<InstanceType<typeof Popup> | null>(null);
	const toutiaoVal = ref(0)  //当前头条值
	const moneyList = ref([{
		name: '￥20',
		key: '20'
	}, {
		name: '￥50',
		key: '50'
	}])
	const moneyListIndex = ref<number | null>(null)
	const getMoneys = ref('')
	const touchMoney = (index : number) => {
		moneyListIndex.value = index
		if (index == 2) {
			getMoneys.value = ''
		} else {
			getMoneys.value = moneyList.value[index].key
		}
	}
	const isBr = ref(false);
	const info = ref({tr:{avatar:'',userName:''},br:{avatarId:'',userName:''}})
	const toutiaoPop = ref<InstanceType<typeof Popup> | null>(null);
	const headlineHistoryList = ref<any>([])
	const headlineHistoryTotal = ref(0)
	const headlineHistoryPageNum = ref(0)
	const headlineGetList = async () => {
		headlineHistoryPageNum.value++
		const data = {
			pageNo: headlineHistoryPageNum.value,
			pageSize: 6
		}
		const res = await headlineHistory({ data: data })
		headlineHistoryTotal.value = res.data.total
		if (headlineHistoryPageNum.value == 1) {
			headlineHistoryList.value = res.data.list
		} else {
			if (res.data.list.length > 0) {
				headlineHistoryList.value.push(...res.data.list)
			}
		}
	}
	const openToutiao = async () => {
		headlineHistoryPageNum.value = 0
		await headlineGetList()
		toutiaoPop.value.open('bottom')
	}
	const toutiaoClose = () => {
		toutiaoPop.value.close()
	}
	const scrollToutiao = () => {
		headlineGetList()
	}
	const data = reactive<any>({
		payChannel: paymentChannels[0].value,
		onConfirm: () => { },
	})
	const chooseTypeIndex = ref<number | null>(null)
	const chooseType = (item) => {
		data.payChannel = item.value
	}
	const zhifu = async () => {
		if (moneyListIndex.value == null) {
			uni.showToast({
				title: '请选择加价金额',
				icon: 'none'
			})
			return
		}
		const data1 = {
			headAmount: Number(getMoneys.value) + Number(toutiaoVal.value),
			payChannel: data.payChannel,
			trendsId: trendsId.value
		}
		if (data.payChannel == 'WALLET') {
			data.show1 = true
			data.onConfirm = async (e) => {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				const res = await upHeadline({ data: { ...data1, payPwd: e } })
				if (res.code == 200) {
					payment(data.payChannel, res.data).then((res) => {
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					})
					uni.hideLoading()
				}

			}
			return
		}
		uni.showLoading({
			title: '加载中...',
			mask: true
		})
		const res = await upHeadline({ data: data1 })
		if (res.code == 200) {
			payment(data.payChannel, res.data).then((res) => {
				setTimeout(() => {
					uni.navigateBack()
				}, 1000)
			})
			uni.hideLoading()
		}
	}
	const getList = async () => {
		const res = await currentHeadline()
		toutiaoVal.value = res.data.headlineAmount
	}
	onLoad(async (option) => {
		trendsId.value = option.id
		const {data} = await queryUserInfo();
		isBr.value = option.userName == data.appUser.userName;
		info.value = {br:data.appUser,tr:option};
		await getList()
		popup.value.open('bottom')
	})
</script>

<style lang="scss">
	page {
		background: transparent;
	}

	.bg-color {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.popups {
		width: 100%;
		background: #F4F6FA;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
	}

	.reportPopup {
		width: 100%;
		height: 1230rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
	}

	.popupMian {
		// width: 94%;
		// margin-left: 3%;
		position: relative;
	}
	.popupTitle1{
		width: 100%;
		background: url('/static/img/index/190.png') no-repeat;
		background-size: 100% 100%;
		padding-bottom: 33rpx;
		display: flex;
		flex-direction: column;
		position: relative;
		align-items: center;
		>text:nth-of-type(1){
			font-size: 36rpx;
			color: #FF263F;
			font-weight: bold;
		}
		>text:nth-of-type(2){
			color: #FF263F;
			font-size: 28rpx;
			margin-top: 12rpx;
		}
		.topImg{
			position: relative;
			top: -10rpx;
			width: 387rpx;
		}
		.tgjl{
			position: absolute;
			left: 27rpx;
			top: 36rpx;
			width: 157rpx;
			height: 52rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 52rpx;
			border: 2rpx solid #FFC9C9;
			image{
				width: 32rpx;
			}
			font-size: 24rpx;
			color: #FF5C60;
			
		}
		.avatar{
			display: flex;
			margin: 28rpx 0 40rpx 0;
			>view{
				display: flex;
				flex-direction: column;
				align-items: center;
				color: #4A3B3B;
				font-weight: bold;
				font-size: 28rpx;
				view{
					width: 148rpx;
					height: 148rpx;
					border-radius: 50%;
					border: 2rpx solid #FDD303;
					margin-bottom: 10rpx;
				}
				
				image{
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
			>view:nth-of-type(2){
				margin-left: 110rpx;
			}
		}
	}
	.popupTitle {
		width: 100%;
		padding:0 4%;
		height: 104rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	
	}

	.reportTitle {
		width: 100%;
		height: 54rpx;
		padding-left: 4%;
		font-size: 36rpx;
		color: #262626;
		margin-top: 32rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.toutiaoWrap {
		width: 100%;
		height: 160rpx;
		border-radius: 24rpx;
		margin-top: 24rpx;
		border: 2rpx solid #FF263F;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.toutiao {
		color: #FF263F;
		font-size: 28rpx;
	}

	.toutiaoMoneyWrap {
		width: 100%;
		display: flex;
		padding-left: 4%;
		margin-top: 24rpx;
	}

	.toutiaoMoney {
		width: 160rpx;
		height: 66rpx;
		background: #F4F6FA;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #262626;
		font-weight: bold;
		margin-right: 32rpx;
		text-align: center;
	}

	.toutiaoMoneys {
		background: #FFDED3;
		color: #FF263F;
		
	}

	.xieyi {
		font-size: 28rpx;
		font-weight: bold;
		padding-left: 4%;
		color: #262626;
		margin-top: 32rpx;
	}

	.reportRecord {
		width: 199rpx;
		height: 66rpx;
		border-radius: 33rpx;
		border: 2rpx solid #CCCCCC;
		margin-top: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.moneyWraps {
		width: 100%;
		height: 106rpx;
		margin-top: 32rpx;
		border-top: 2rpx solid #F4F6FA;
	}

	.moneyWrap {
		width: 92%;
		height: 106rpx;
		margin-left: 4%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.typeWrap {
		width: 92%;
		margin-top: 32rpx;
		margin-left: 4%;
		border-top: 1rpx solid #F4F6FA;
	}

	.type {
		width: 100%;
		height: 64rpx;
		margin-top: 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.types {
		height: 64rpx;
		display: flex;
		align-items: center;
	}

	.types1 {
		image {
			width: 36rpx;
		}
	}

	.typeImg {
		width: 48rpx;
	}

	.typeText {
		color: #262626;
		font-size: 28rpx;
		margin-left: 8rpx;
	}

	.chooseType {
		width: 36rpx;
		height: 36rpx;
	}

	.liji {
		width: 190rpx;
		height: 80rpx;
		background: #FF263F;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		font-size: 32rpx;
		color: #fff;
	}

	/* 卡片整体样式 */
	.reportCard {
		background-color: #ffffff;
		border: 1px solid #ddd;
		border-radius: 8px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		margin: 16px;
		padding: 16px;
		overflow: hidden;
	}

	/* 卡片标题样式 */
	.reportCardTitle {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 8px;
		color: #333;
	}

	/* 卡片内容样式 */
	.reportCardContent {
		font-size: 16px;
		color: #666;
		margin-bottom: 16px;
	}

	/* 图片包裹器样式 */
	.reportCardImgWrap {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	.reportCardImg {
		width: 200rpx;
		height: 200rpx;
	}

	.hongbao-card {
		background-color: #fff;
		border-radius: 12px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		width: 93%;
		margin-left: 4%;
		overflow: hidden;
		margin-bottom: 24rpx;
	}

	.card-content {
		padding: 16px;
	}

	.card-title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 16px;
		color: #333;
	}

	.card-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 8px;
		color: #666;
	}

	.label {
		font-size: 14px;
		font-weight: bold;
		color: #999;
		min-width: 60px;
	}

	.value {
		font-size: 16px;
		color: #333;
	}

	.money {
		color: #ff6347;
	}
</style>